<template>
  <div>
    <div :class="scrollFlag ? 'nav-container' : 'nav-container-hidden'">
      <div class="blog-title">
        <h2
          class="animate__animated animate__swing logo"
          :key="shade"
          @click="shade++"
        >
          忘月
        </h2>
      </div>
      <div class="app-menu-handle" @click="openDrawer">
        <i class="iconfont iconhanbao" />
      </div>
      <div class="nav-title">
        <!-- <div class="menus-item">
          <a class="menu-btn"> <i class="iconfont iconsousuo" /> 搜索 </a>
        </div> -->
        <div class="menus-item">
          <router-link class="menu-btn" to="/" exact-active-class="active">
            <i class="iconfont iconzhuye" /> <i>首页</i>
          </router-link>
        </div>
        <div class="menus-item">
          <router-link class="menu-btn" to="/essay" exact-active-class="active">
            <i class="iconfont iconfaxian" /> <i>随笔</i>
          </router-link>
        </div>
        <div class="menus-item">
          <router-link
            class="menu-btn"
            to="/technology"
            exact-active-class="active"
          >
            <i class="iconfont iconqita" /> <i>技术</i>
          </router-link>
        </div>
        <div class="menus-item">
          <router-link
            class="menu-btn"
            to="/aboutme"
            exact-active-class="active"
          >
            <i class="iconfont iconzhifeiji" /> <i>关于</i>
          </router-link>
        </div>
        <div class="menus-item">
          <router-link
            class="menu-btn"
            to="/message"
            exact-active-class="active"
          >
            <i class="iconfont iconpinglunzu" /> <i>留言</i>
          </router-link>
        </div>
      </div>
      <div class="search_input">
        <input
          type="text"
          placeholder="想搜啥?"
          class="search-txt"
          v-model="keywords"
        />
        <span class="searchbtn">
          <i
            class="iconfont iconsousuo"
            aria-hidden="true"
            @click="openSearch"
          ></i>
        </span>
      </div>
      <div
        style="margin-right: 50px"
        class="login_btn"
        v-if="!this.$store.state.userInfo"
      >
        <button size="mini" effect="light" type="primary" @click="login">
          登录
        </button>
        <!-- <button size="mini" effect="light" type="warning">注册</button> -->
      </div>
      <div v-else class="loginInfo">
        <el-avatar :src="userInfo.avatar"></el-avatar>
        <h3 class="web-font nickname">{{ userInfo.nickname }}</h3>
        <ul class="lagout">
          <li>
            <a @click="logout"><i class="iconfont icontuichu" /> 退出</a>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog width="30%" :visible.sync="searchFlag">
      <el-tabs type="border-card">
        <el-tab-pane label="博客">
          <!-- <div class="search-input-wrapper">
            <input v-model="keywords" placeholder="输入文章标题或内容..." />
          </div> -->
          <div class="search_htitle">
            系统搜索到以下文章符合<span>{{ keywords }}</span
            >的查询结果
          </div>
          <div class="search-result-wrapper">
            <hr class="divider" />
            <ul>
              <li class="search-reslut" v-for="item of blogList" :key="item.id">
                <!-- 文章标题 -->
                <a @click="goArticle(item.id)" v-html="item.title" />
                <!-- 文章内容 -->
                <p
                  class="search-reslut-content text-justify"
                  v-html="item.content"
                />
              </li>
            </ul>
            <!-- 搜索结果不存在提示 -->
            <div v-show="blogList.length == 0" style="font-size: 0.875rem">
              找不到您查询的内容：{{ keywords }}
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="随笔">
          <div class="search_htitle">
            系统搜索到以下文章符合<span>{{ keywords }}</span
            >的查询结果
          </div>
          <div class="search-result-wrapper">
            <hr class="divider" />
            <ul>
              <li
                class="search-reslut"
                v-for="item of essayList"
                :key="item.id"
              >
                <!-- 文章标题 -->
                <a @click="goEssay(item.id)" v-html="item.title" />
                <!-- 文章内容 -->
                <p
                  class="search-reslut-content text-justify"
                  v-html="item.content"
                />
              </li>
            </ul>
            <!-- 搜索结果不存在提示 -->
            <div v-show="essayList.length == 0" style="font-size: 0.875rem">
              找不到您查询的内容：{{ keywords }}
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-card class="search-wrapper" style="border-radius: 4px">
        
        
      </el-card> -->
    </el-dialog>
  </div>
</template>
<script>
import { getblogs, searchEssay } from "@/request/api";
import { mapState } from "vuex";
export default {
  name: "",
  components: {},
  props: [""],

  computed: {
    islogin() {
      return this.userInfo === null;
    },
    ...mapState(["userInfo"]),
  },
  watch: {
    top(newValue, oldValue) {
      // 等新值大于100的时候再做变化（优化一下）
      if (newValue > 60) {
        if (newValue > oldValue) {
          this.scrollFlag = false;
        } else {
          this.scrollFlag = true;
        }
      }
    },
  },

  data() {
    return {
      shade: 0,
      navClass: "",
      scrollFlag: true,
      top: "",
      searchFlag: false,
      keywords: "",
      totalcount: 0,
      pagenum: 1,
      pagesize: 100,
      blogList: [],
      essayList: [],
    };
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", () => {
      this.top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
    });

    // window.addEventListener("scroll", this.scroll);
  },
  methods: {
    openDrawer() {
      this.$store.state.drawer = true;
    },
    async getBlogList() {
      const { data: res } = await getblogs({
        query: this.keywords,
        typeId: "",
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      });

      this.blogList = res.data;
      this.totalcount = res.total;
    },
    async searchEssay() {
      const { data: res } = await searchEssay({
        query: this.keywords,
      });
      console.log(res.data);
      this.essayList = res.data;
    },
    login() {
      this.$store.state.loginFlag = true;
    },
    logout() {
      window.sessionStorage.clear();
      this.$store.commit("getUserInfo");
      this.$message({ message: "退出登录成功", type: "success", offset: 80 });
    },
    openSearch() {
      if (this.keywords == "") {
        return;
      }
      this.searchFlag = true;
      this.getBlogList();
      this.searchEssay();
    },
    goArticle(articleId) {
      this.searchFlag = false;
      this.$router.push({ path: "/article/" + articleId });
    },
    goEssay(essayId) {
      this.searchFlag = false;
      this.$router.push({ path: "/essaycon/" + essayId });
    },
  },
};
</script>
<style scoped lang='less'>
i {
  margin-right: 4px;
}
ul {
  list-style: none;
}

/* .nav-container {
  height: 60px;
  font-size: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  
} */
.nav-container {
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 300;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
.nav-container-hidden {
  display: none;
  transform: all 0.2s ease-in-out;
}
.app-menu-handle {
  display: none;
}
.blog-title,
.nav-title {
  display: flex;
  align-items: center;
  height: 100%;
}
.blog-title {
  margin-left: 20px;
}
.nav-title {
  margin-left: 100px;
}
.blog-title a {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
.menus-item {
  position: relative;
  display: inline-block;
  margin: 0 0 0 0.875rem;
}
.menus-item a {
  transition: all 0.2s;
  color: rgb(253, 249, 249);
}
.menu-btn:hover {
  color: #49b1f5 !important;
}
.menu-btn:hover:after {
  width: 100%;
}
.menus-item a:after {
  position: absolute;
  bottom: -5px;
  left: 0;
  z-index: -1;
  width: 0;
  height: 3px;
  /* background-color: #80c8f8; */
  background-image: linear-gradient(to left, #fd79a8, #a29bf6);

  content: "";
  transition: all 0.3s ease-in-out;
}
.search_input {
  // margin-left: 100px;
  height: 40px;
  border-radius: 40px;
  background-color: #2f3640;
}
.search-txt {
  border: none;
  background: none;
  padding: 0;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  width: 0;
  transition: 0.4s;
}
.searchbtn {
  color: #fff;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #d4dff0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.4s;
}
.search_input:hover .search-txt {
  width: 200px;
  padding: 0 6px;
}
.search_input:hover .searchbtn {
  background-color: #fff;
  color: #49b1f5;
}
// .search_input input {
//   outline: none;
//   padding: 5px 10px;
// }
.login_btn button {
  display: inline-block;
  width: 60px;
  /* background-color: rgb(185, 196, 165); */
  background-image: linear-gradient(to left, #fd79a8, #a29bf6);
  border-radius: 5px;
  color: rgb(253, 248, 248);
  padding: 3px;
  border: 0;
  margin: 10px;
}
.loginInfo {
  padding-right: 20px;
  display: flex;
  align-items: center;
  h3 {
    font-size: 14px;
    margin-left: 10px;
  }
}
.el-avatar {
  width: 40px;
  height: 40px;
}
.loginInfo:hover .lagout {
  display: block;
}
.lagout {
  position: absolute;
  display: none;
  right: 0;
  width: max-content;
  margin-top: 80px;
  box-shadow: 0 5px 20px -4px rgba(0, 0, 0, 0.5);
  background-color: #fff;
  animation: submenu 0.5s 0.1s ease both;
}
.lagout:before {
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 20px;
  content: "";
}
.lagout a {
  line-height: 1;
  color: #4c4948 !important;
  text-shadow: none;
  display: block;
  padding: 6px 14px;
}
.lagout a:hover {
  background: #4ab1f4;
}
.active i {
  color: transparent;
  color: #12b7de;
}
.search-wrapper {
  padding: 1.25rem;
  height: 100%;
  background: #fff !important;
}
.search-title {
  color: #49b1f5;
  font-size: 1.25rem;
  line-height: 1;
}
.search-input-wrapper {
  display: flex;
  padding: 5px;
  height: 35px;
  width: 100%;
  border: 2px solid #8e8cd8;
  border-radius: 2rem;
}
.search-input-wrapper input {
  width: 100%;
  margin-left: 5px;
  outline: none;
}
.search-reslut a {
  color: #555;
  font-weight: bold;
  border-bottom: 1px solid #999;
  text-decoration: none;
}
.search-reslut-content {
  color: #555;
  cursor: pointer;
  border-bottom: 1px dashed #ccc;
  padding: 5px 0;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.divider {
  margin: 20px 0;
  border: 2px dashed #d2ebfd;
}
.search_htitle span {
  color: rgb(244, 53, 53);
}
@media only screen and (max-width: 992px) {
  .nav-container {
    height: 60px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 300;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
  }
  .nav-container-hidden {
    display: none;
    transform: all 0.2s ease-in-out;
  }
  .blog-title {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .blog-title {
    margin-left: 20px;
    font-size: 18px;
    font-weight: bold;
  }
  .app-menu-handle {
    display: block;
    margin-right: 20px;
  }
  .nav-title {
    height: 0;
    position: fixed;
    width: 100%;
    top: 60px;
    left: 0;
    z-index: 1000;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.9);
  }
  .menus-item {
    text-align: center;
    line-height: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .search_input {
    display: none;
  }
  .loginInfo,
  .login_btn {
    display: none;
  }
}
</style>  